<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <link rel="stylesheet" href="../../css/bootstrap.min.css">
    <link rel="stylesheet" href="../../css/com.css">
    <title></title>
    <style>
        html {
            background-color: #e9eaee;
        }
    </style>
</head>
<body>
<div class="my-head">
    <div class="container">
        <div class="row">
            <div class="col-sm-2 san-fl">
                <img  class="index-log" src="../../images/index-logo.png">
            </div>
            <a href="#" class="head-btn to-index">首页</a>
            <a href="#" class="head-btn to-all-course">全部课程</a>
            <div class="col-sm-6 index-hr san-fr">
                <div class="col-xs-6 index-hr-pd ab-l san-fr">
                    <div class="ver-cen-pad">
                        <button class="btn btn-default login-btn">登录</button>
                        <button class="btn btn-default register-btn">注册</button>
                    </div>
                </div>
                <div class="col-xs-6 san-fr">
                    <form class="form-horizontal">
                        <div class="form-group index-hr-pd">
                            <div class="input-group ver-cen-pad san-fr add-margin-r" id="head-input-box">
                                <label for="index-search" class="sr-only">Search</label>
                                <input id="index-search" class="form-control" type="text">
                                <!--     <div class="input-group-btn index-search-icon">
                                         <button type="submit" class="btn" >
                                             <img class="search-btn" src="images/search-icon.png"></button>
                                     </div>-->
                            </div>
                        </div>
                    </form>
                </div>

            </div>
        </div>
    </div>
</div>
<div class="all-course-box">
    <div class="container">
        <div class="row search-types">
            <div class="col-md-12">
                <ul class="list-inline search-type-1">
                    <li class="active">全部</li>
                    <li>创客、电子、智能硬件</li>
                    <li>物理科学、化学</li>
                    <li>航模、遥控模型</li>
                    <li>3D 打印、3D 笔</li>
                    <li class="dropdown" id="more-type">
                        <a class="dropdown-toggle" data-toggle="dropdown">更多分类<span class="caret"></span></a>
                        <ul class="dropdown-menu" aria-labelledby="more-type">
                            <li>全部</li>
                            <li>创客</li>
                            <li>电子</li>
                            <li>智能硬件</li>
                        </ul>
                    </li>
                </ul>
            </div>
            <div class="col-md-12">
                <ul class="list-inline search-type-2">
                    <li>全部</li>
                    <li>创客</li>
                    <li>电子</li>
                    <li>智能硬件</li>
                </ul>
            </div>
        </div>
    </div>
    <div class="course-list">
        <div class="container">
            <div class="row row-list">
                <div class="col-md-3 course-wrap">
                    <div class="course-d">
                        <img src="../../images/course-ex-img.jpg" />
                        <h5>设计与发现</h5>
                        <span>主讲老师 : 任老师</span><span>200 人报名</span>
                        <p>99.00</p>
                    </div>
                </div>
                <div class="col-md-3 course-wrap">
                    <div class="course-d">
                        <img src="../../images/course-ex-img.jpg" />
                        <h5>设计与发现</h5>
                        <span>主讲老师 : 任老师</span><span>200 人报名</span>
                        <p>￥ 0.00</p>
                    </div>
                </div>
                <div class="col-md-3 course-wrap">
                    <div class="course-d">
                        <img src="../../images/course-ex-img.jpg" />
                        <h5>设计与发现</h5>
                        <span>主讲老师 : 任老师</span><span>200 人报名</span>
                        <p>99.00</p>
                    </div>
                </div>
                <div class="col-md-3 course-wrap">
                    <div class="course-d">
                        <img src="../../images/course-ex-img.jpg" />
                        <h5>设计与发现</h5>
                        <span>主讲老师 : 任老师</span><span>200 人报名</span>
                        <p>99.00</p>
                    </div>
                </div>
                <div class="col-md-3 course-wrap">
                    <div class="course-d">
                        <img src="../../images/course-ex-img.jpg" />
                        <h5>设计与发现</h5>
                        <span>主讲老师 : 任老师</span><span>200 人报名</span>
                        <p>99.00</p>
                    </div>
                </div>
                <div class="col-md-3 course-wrap">
                    <div class="course-d">
                        <img src="../../images/course-ex-img.jpg" />
                        <h5>设计与发现</h5>
                        <span>主讲老师 : 任老师</span><span>200 人报名</span>
                        <p>99.00</p>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-6 col-md-push-6 text-right">

                </div>
            </div>
        </div>
    </div>
</div>


<div class="footer">
    <div class="container">
        <div class="row">
            <div class="col-md-9">
                <h4 class="foot-title">联系方式</h4>
                <ul class="my-list foot-list">
                    <li>朝阳区安立路 101 号院</li>
                    <li><a href="mailto: info@makerclass.cn">info@makerclass.cn</a></li>
                </ul>
                <h5 class="foot-title-se"><a class="cooperate-web">中国青少年科技辅导员协会</a> <span>合作网站</span></h5>
                <p class="foot-clr">Copyright 2015 备案号 京备2016123445678899</p>
            </div>
            <div class="col-md-3">
                <div class="col-xs-10">
                    <img src="../../images/index-wc-icon.png">
                    <a class="back-top" href="#"></a>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="../../js/jquery.min.js"></script>
<script src="../../js/bootstrap.min.js"></script>
<script>
    $(function () {
        $("#more-type").hover(function(){
            $(this).find("ul").show();
        }, function () {
            $(this).find("ul").hide();
        });
        $(".back-top").click(function(){
            var evt = window.event || arguments.callee.caller.arguments[0];
            evt.preventDefault();
            _scrollTop(judgeTop());

        });
        function _scrollTop(num) {
            if(num == 1) {
                var timer = null;
                timer = setInterval(function () {

                    var height = document.documentElement.scrollTop;
                    var speed =  document.documentElement.scrollTop/5;
                    console.log(height);
                    document.documentElement.scrollTop -= speed;
                    if(height == 0) {
                        clearInterval(timer);
                    }
                },1);
            }
            if(num == 2) {
                var timer = null;
                timer = setInterval(function () {
                    var height = document.body.scrollTop;
                    var speed =  document.body.scrollTop/5;
                    console.log(height);
                    document.body.scrollTop -= speed;
                    if(height == 0) {
                        clearInterval(timer);
                    }
                });
            }

        }
        function judgeTop() {
            if(document.documentElement.scrollTop > 0) {
                return 1
            }
            if(document.body.scrollTop > 0) {
                return 2
            }
        }
        $(window).scroll(function () {
            var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
            if(scrollTop > 0) {
                $(".back-top").show();
            }
            if(scrollTop == 0) {
                $(".back-top").fadeOut();
            }
        });




    })
</script>
</body>
</html>